import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models/product.dart';
import '../providers/cart_provider.dart';
import 'cart_page.dart';

class ProductListPage extends StatelessWidget {
  final List<Product> products = [
    Product(
      id: 1,
      name: 'iPhone 13',
      price: 5999,
      image: 'https://picsum.photos/200',
    ),
    Product(
      id: 2,
      name: 'MacBook Pro',
      price: 11999,
      image: 'https://picsum.photos/201',
    ),
    Product(
      id: 3,
      name: 'AirPods Pro',
      price: 1999,
      image: 'https://picsum.photos/202',
    ),
  ];

  ProductListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('商品列表'),
        actions: [
          Stack(
            alignment: Alignment.center,
            children: [
              IconButton(
                icon: const Icon(Icons.shopping_cart),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const CartPage()),
                  );
                },
              ),
              Positioned(
                right: 8,
                top: 8,
                child: Consumer<CartProvider>(
                  builder: (context, cart, child) {
                    return cart.itemCount > 0
                        ? Container(
                            padding: const EdgeInsets.all(2),
                            decoration: BoxDecoration(
                              color: Colors.red,
                              borderRadius: BorderRadius.circular(10),
                            ),
                            constraints: const BoxConstraints(
                              minWidth: 16,
                              minHeight: 16,
                            ),
                            child: Text(
                              '${cart.itemCount}',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 10,
                              ),
                              textAlign: TextAlign.center,
                            ),
                          )
                        : const SizedBox();
                  },
                ),
              ),
            ],
          ),
        ],
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
          final product = products[index];
          return Card(
            margin: const EdgeInsets.all(8),
            child: ListTile(
              leading: Image.network(
                product.image,
                width: 50,
                height: 50,
                fit: BoxFit.cover,
              ),
              title: Text(product.name),
              subtitle: Text('¥${product.price}'),
              trailing: Consumer<CartProvider>(
                builder: (context, cart, child) {
                  return Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      if (cart.items.containsKey(product))
                        IconButton(
                          icon: const Icon(Icons.remove),
                          onPressed: () {
                            cart.removeItem(product);
                          },
                        ),
                      if (cart.items.containsKey(product))
                        Text('${cart.items[product]}'),
                      IconButton(
                        icon: const Icon(Icons.add),
                        onPressed: () {
                          cart.addItem(product);
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(
                              content: Text('已将 ${product.name} 加入购物车'),
                              duration: const Duration(seconds: 1),
                            ),
                          );
                        },
                      ),
                    ],
                  );
                },
              ),
            ),
          );
        },
      ),
    );
  }
} 